<template>
  <CardDialog v-model:visible="show" width="1000px" :title="`${form.bridgeId ? '编辑' : '新增'}水位计`">
    <div class="form-content">
      <div class="form-left">
        <a-form class="dialog-form" ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
          <a-form-item label="水位计名称" name="waterName">
            <a-input style="width: 100%" v-model:value="form.waterName" placeholder="请输入水位计名称" />
          </a-form-item>
          <a-form-item label="经度" name="longitude">
            <a-input style="width: 100%" v-model:value="form.longitude" placeholder="请输入经度" />
          </a-form-item>
          <a-form-item label="纬度" name="latitude">
            <a-input style="width: 100%" v-model:value="form.latitude" placeholder="请输入纬度" />
          </a-form-item>
          <a-form-item label="SECRET" name="secret">
            <a-input style="width: 100%" v-model:value="form.secret" placeholder="请输入SECRET" />
          </a-form-item>
          <a-form-item label="所属大桥" name="bridgeId">
            <a-select ref="select" v-model:value="form.bridgeId" style="width: 100%" placeholder="请选择所属大桥">
              <a-select-option v-for="item in bridgeList" :key="item.bridgeId" :value="item.bridgeId">
                {{ item.bridgeName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="水位计类型" name="waterType">
            <a-input style="width: 100%" v-model:value="form.waterType" placeholder="请输入水位计类型" />
          </a-form-item>
          <a-form-item label="是否启用" name="isDisabled">
            <a-switch v-model:checked="form.isDisabled" checked-children="开" un-checked-children="关" />
          </a-form-item>
        </a-form>
      </div>
      <div class="form-right" v-if="show">
        <div class="form-right-tips">点击地图获取AIS坐标</div>
        <MapCard class="map-card" ref="mapRef" @getClickCoordinate="getClickCoordinate" type="point" />
      </div>
    </div>
    <div class="button-list">
      <a-button class="form-button" type="primary" @click="onSubmit">保存</a-button>
      <a-button class="form-button form-button-cancel" type="primary" @click="onClose">取消</a-button>
      <a-button class="form-button form-button-cancel" type="primary" @click="resetForm">重置</a-button>
    </div>
  </CardDialog>
</template>
<script setup>
  import { reactive, nextTick, ref } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { smartSentry } from '/@/lib/smart-sentry';
  import CardDialog from '/@/components/cardDialog/index.vue';
  import MapCard from '/@/components/map/index.vue';
  import { api } from '/@/api/plat/water.js';

  const props = defineProps({
    bridgeList: {
      type: Array,
      default: () => [],
    },
  });
  const emits = defineEmits(['onload']);
  let show = ref(false);
  const mapRef = ref();
  const formRef = ref();
  const formDefault = {
    waterId: undefined,
    waterName: undefined,
    isEnabled: '0',
    isDisabled: false,
    latitude: undefined,
    longitude: undefined,
    secret: undefined,
    bridgeId: undefined,
    waterType: undefined,
  };
  const rules = {
    waterName: [{ required: true, message: '请填写水位计名称' }],
    isEnabled: [{ required: true, message: '请选择是否启用' }],
    latitude: [{ required: true, message: '请填写纬度' }],
    longitude: [{ required: true, message: '请填写经度' }],
    aisIp: [{ required: true, message: '请填写IP地址' }],
    aisPort: [{ required: true, message: '请填写端口号' }],
    secret: [{ required: true, message: '请填写SECRET' }],
    connectionType: [{ required: true, message: '请填写连接类型' }],
    bridgeId: [{ required: true, message: '请选择所属大桥' }],
    waterType: [{ required: true, message: '请填写水位计类型' }],
  };
  let form = reactive({ ...formDefault });

  function getClickCoordinate(val) {
    form.longitude = val[0].toFixed(6);
    form.latitude = val[1].toFixed(6);
  }

  function open(rowData) {
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }
    show.value = true;
    nextTick(() => {
      mapRef.value.initMainMap();
      mapRef.value.drawPoint(form, '/images/sign/icon_AIS.png');
    });
  }

  function resetForm() {
    Object.assign(form, formDefault);
  }

  function onClose() {
    Object.assign(form, formDefault);
    show.value = false;
  }

  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save(form);
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save(formData) {
    SmartLoading.show();
    try {
      if (formData.waterId) {
        await api.update(formData);
      } else {
        await api.add(formData);
      }
      message.success('操作成功');
      emits('onload');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    open,
  });
</script>

<style lang="less" scoped>
  @import '/@/assets/style/form.less';
  .form-content {
    height: 60vh;
    display: grid;
    grid-template-columns: 40% 60%;
    padding: 0 0 10px;
    .form-left {
      padding: 5px 0 0;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #2f6e90;
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(0, 0, 0, 0.4);
    }
    .form-right {
      padding-right: 5px;
      position: relative;
      > .map-card {
        border: 2px solid #1d77c4;
        border-radius: 3px;
        cursor: pointer;
      }
      .form-right-tips {
        position: absolute;
        z-index: 1;
        top: 2px;
        left: 2px;
        background-color: #333b;
        color: #fff;
        padding: 10px 15px;
        border-radius: 0 0 20px 0;
      }
    }
  }
  .button-list {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    .form-button {
      margin: 0 10px;
    }
    .form-button-cancel {
      background-color: #ccc;
      color: #000;
      &:hover {
        background-color: #eee;
      }
    }
  }
</style>
